<template>

  <div>

    <h2>企业信息</h2>

    <el-form ref="form" :model="form" label-width="120px" class="el-form">

      <el-form-item label="图片上传" >

        <el-upload

          v-model="form.logo"

          :on-success="onUploadSuccess"

          :before-upload="beforeUpload"

          :on-preview="onUploadPreview"

          :on-remove="onUploadRemove"

          :multiple="true"

          :action="BASE_API+'/pricture/fileUpload'"

          class="upload-demo"

          list-type="picture-card"

          :file-list="fileList">

          <i class="el-icon-plus"/>

          <div slot="tip" class="el-upload__tip">只能上传jpg/png/gif文件，且不超过2MB</div>

        </el-upload>

        <el-image

          :src="form.logo"

          style="width: 150px;height:150px;left: 170px;top: -0px;position: absolute"

        ></el-image>

      </el-form-item>

      <el-form-item label="企业名称">

        <el-input v-model="form.qyName" disabled></el-input>

      </el-form-item>

      <el-form-item label="企业编码">

        <el-input v-model="form.qyCode" disabled></el-input>

      </el-form-item>
<!--      <el-form-item label="企业名称" :prop="disabledFields.includes('企业名称') ? null : 'qyName'">-->
<!--        <el-input v-model="form.qyName" :disabled="disabledFields.includes('企业名称')"></el-input>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="企业编码" :prop="disabledFields.includes('企业编码') ? null : 'qyCode'">-->
<!--        <el-input v-model="form.qyCode" :disabled="disabledFields.includes('企业编码')"></el-input>-->
<!--      </el-form-item>-->

      <el-form-item label="联系人姓名">

        <el-input v-model="form.contactName"></el-input>

      </el-form-item>

      <el-form-item label="联系人电话">

        <el-input v-model="form.contactPhone"></el-input>

      </el-form-item>

      <el-form-item label="公司地址">

        <el-input v-model="form.address"></el-input>

      </el-form-item>

      <el-form-item label="备注信息">

        <el-input v-model="form.remarks"></el-input>

      </el-form-item>

<!--      <el-form-item>-->

<!--        <el-button type="primary" @click="submitForm">保存</el-button>-->

<!--        <el-button>取消</el-button>-->

<!--      </el-form-item>-->

    </el-form>

  </div>

</template>

<script>
import disabledFields from "core-js/internals/array-includes";
import {updateQy} from "@/api/qy/qy";


export default {

  data() {

    return {

      form: {
        logo:'\n' +
          'https://tms-1.oss-cn-beijing.aliyuncs.com/2024/11/07/647fc15a8855455a89f0d3709bcf337blogo.eeed0dd2.png',

        qyName: '七尾商贸集团',

        qyCode: '1339000',

        contactName: '杜宇',

        contactPhone: '17789067899',

        address: '广东省/广州市/越秀区',

        remarks: ''

      },

      // 接口API地址

      BASE_API: 'http://localhost:8701',

      fileList: [],

      empImagesList: [],

      dialogImageVisible: false,

      dialogImageUrl: '',
      imgUrl: '',
      // 图片预览对话框
      dialogVisible: false,

      disabled: false

    };

  },

  computed: {
    disabledFields() {
      return disabledFields
    },

    formNoNewline: {

      get() {

        return {

          qyNameNoNewline: this.form.qyName.replace(/\n/g, ''),

          qyCodeNoNewline: this.form.qyCode.replace(/\n/g, ''),

          contactNameNoNewline: this.form.contactName.replace(/\n/g, ''),

          contactPhoneNoNewline: this.form.contactPhone.replace(/\n/g, ''),

          addressNoNewline: this.form.address.replace(/\n/g, ''),

          remarksNoNewline: this.form.remarks.replace(/\n/g, '')

        };

      },

      set(value) {

        this.form.qyName = value.qyNameNoNewline;

        this.form.qyCode = value.qyCodeNoNewline;

        this.form.contactName = value.contactNameNoNewline;

        this.form.contactPhone = value.contactPhoneNoNewline;

        this.form.address = value.addressNoNewline;

        this.form.remarks = value.remarksNoNewline;

      }

    }

  },

  methods: {
    /** 提交按钮 */
    submitForm() {
      const attrListArray = []
      this.empAttrValueList = attrListArray
      if (this.empImagesList.length > 0) {
        this.imgUrl = this.empImagesList[0].imgUrl
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateQy(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
            });
          }
        }
      });
    },

    // 删除上传的文件

    onUploadRemove(file, fileList) {

      var list = []

      this.empImagesList.forEach(item => {

        if(file.url != item.imgUrl) {

          list.push(item)

        }

      })

      this.empImagesList = list

    },

    // 上传图片成功的回调

    onUploadSuccess(res, file) {

      console.log(res,file);

      this.form.picture = res;

      // 填充上传文件列表

      this.empImagesList.push({

        imgName: file.name,

        imgUrl: file.response.data

      })

    },

    // 文件上传限制条件

    beforeUpload(file) {

      const isJPG = file.type === 'image/jpeg'

      const isPNG = file.type === 'image/png'

      const isGIF = file.type === 'image/gif'

      const isLt2M = file.size / 1024 / 1024 < 2



      if (!isJPG && !isPNG && !isGIF) {

        this.$message.error('上传头像图片只能是 JPG、PNG 或 GIF 格式!')

        return false

      }

      if (!isLt2M) {

        this.$message.error('上传头像图片大小不能超过 2MB!')

        return false

      }

      return true

    },

    // 上传的文件预览

    onUploadPreview(file) {

      this.dialogImageUrl = file.url

      this.dialogImageVisible = true

    },

    onSubmit() {

      console.log('submit!', this.form);

    },

    handleRemove(file) {

      console.log(file);

    },

    handlePictureCardPreview(file) {

      this.dialogImageUrl = file.url;

      this.dialogVisible = true;

    },

    handleDownload(file) {

      console.log(file);

    }

  }

};

</script>

<style scoped>

/* 设置整个表单容器的样式 */

.el-form {

  width: 80%; /* 根据需要调整宽度 */

  margin: 0 auto; /* 居中 */

  padding: 20px; /* 内边距 */

  border: 1px solid #dcdcdc; /* 边框 */

  border-radius: 8px; /* 圆角 */

  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); /* 阴影 */

}



/* 设置表单项的样式 */

.el-form-item {

  margin-bottom: 20px; /* 每个表单项之间的间距 */

}



/* 设置输入框的样式 */

.el-input__inner {

  border: 1px solid #c0c4cc; /* 边框颜色 */

  border-radius: 4px; /* 圆角 */

  padding: 10px; /* 内边距 */

  font-size: 14px; /* 字体大小 */

  box-sizing: border-box; /* 包括内边距和边框在内计算宽度 */

  width: 100%; /* 宽度占满父容器 */

}



/* 设置上传组件的样式 */

.el-upload__input {

  border: none; /* 去掉边框 */

  padding: 0; /* 去掉内边距 */

  width: 100%; /* 宽度占满父容器 */

  height: auto; /* 高度自适应 */

}



/* 设置图片预览对话框的样式 */

.el-dialog {

  width: 80%; /* 对话框宽度 */

  margin: 0 auto; /* 居中 */

}



.el-dialog__header {

  background-color: #f5f7fa; /* 头部背景色 */

  padding: 15px 20px; /* 内边距 */

  border-bottom: 1px solid #ebeef5; /* 底部边框 */

}



.el-dialog__body {

  padding: 20px; /* 内边距 */

}



/* 图片预览的样式 */

.el-dialog img {

  max-width: 100%; /* 图片最大宽度占满对话框 */

  height: auto; /* 高度自适应 */

  display: block; /* 去除底部间隙 */

  margin: 0 auto; /* 居中 */

}



/* 按钮的样式 */

.el-button {

  padding: 10px 20px; /* 内边距 */

  font-size: 14px; /* 字体大小 */

  border-radius: 4px; /* 圆角 */

}



.el-button--primary {

  background-color: #409eff; /* 背景色 */

  border-color: #409eff; /* 边框色 */

  color: #fff; /* 文字颜色 */

}



.el-button--primary:hover {

  background-color: #66b1ff; /* 悬停背景色 */

  border-color: #66b1ff; /* 悬停边框色 */

}

</style>
